<template>
  <div class="search">
    <header>
      <input type="text" placeholder="请输入搜索内容" v-model="searchVal" />
      <button>搜索</button>
    </header>
    <table>
      <tr>
        <th>商品名</th>
        <th>
          单价
          <span @click="orderFn('price', false)">↑</span>
          <span @click="orderFn('price', true)">↓</span>
        </th>

        <th>
          销量<span @click="orderFn('price', false)">↑</span>
          <span @click="orderFn('price', true)">↓</span>
        </th>
      </tr>
      <tr v-for="(item, index) in list" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
        <td>{{ item.sales }}万</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      goodsList: [
        //假数据
        { name: "三星Galaxy Note8", price: 5200, sales: 2.6 },
        { name: "iphone5s", price: 2500, sales: 2.2 },
        { name: "iphone6", price: 2800, sales: 1.6 },
        { name: "iphone6s", price: 3200, sales: 2.9 },
        { name: "iphone7", price: 3800, sales: 12.6 },
        { name: "iphone7plus", price: 4200, sales: 2.1 },
        { name: "iphone8", price: 5500, sales: 10.6 },
        { name: "华为", price: 4600, sales: 7.6 },
        { name: "小米", price: 1200, sales: 32.6 },
        { name: "OPPOR11", price: 2500, sales: 1.2 },
        { name: "vivoX20", price: 3250, sales: 2.9 },
        { name: "OPPOR11s", price: 3000, sales: 2.1 },
      ],
      searchVal: "",
      letter: "", //默认不排序
      original: false, //默认从小到大排列
    };
  },
  computed: {
    list: function () {
      var _this = this;

      var arrByZM = [];
      for (var i = 0; i < this.goodsList.length; i++) {
        if (this.goodsList[i].name.search(this.searchVal) != -1) {
          arrByZM.push(this.goodsList[i]);
        }
      }
      // console.log(arrByZM);
      //逻辑-->升序降序排列  false: 默认从小到大  true：默认从大到小
      //判断，如果要letter不为空，说明要进行排序
      if (this.letter != "") {
        // console.log(this.letter);
        arrByZM.sort(function (a, b) {
          if (_this.original) {
            return b[_this.letter] - a[_this.letter];
          } else {
            return a[_this.letter] - b[_this.letter];
          }
        });
      }
      //一定要记得返回筛选后的数据
      return arrByZM;
    },
  },
  created() {},
  mounted() {},
  watch: {},
  methods: {
    search(val) {
      this.searchVal = val;
    },
    orderFn(letter, original) {
      this.letter = letter; //排序字段 price or sales
      this.original = original; //排序方式  up or down
    },
  },
  components: {},
};
</script>

<style scoped lang="scss">
.search {
  width: 500px;
  height: 600px;
  background: skyblue;
  border: 1px solid pink;
  margin: 0 auto;
  header {
    width: 100%;
    height: 100px;
    line-height: 100px;
    padding-left: 40px;

    input {
      width: 300px;
      height: 40px;
      font-size: 20px;
      font-weight: 0.3rem;
      margin-right: 10px;
    }
    button {
      width: 80px;
      height: 40px;
      font-size: 20px;
    }
  }
  table {
    padding-top: 20px;
    width: 100%;
    text-align: center;
    height: auto;
  }
  th,
  td {
    width: 33.3%;
    padding: 5px;
    border: 2px solid blanchedalmond;
    span {
      width: 15px;
      margin-left: 10px;
      display: inline-block;
      background: pink;
    }
  }
}
</style>
